<template>
  <div class="spot-manager-container">
    <h1 class="page-title">点位管理</h1>

    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
      <el-form-item label="点位名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入点位名称" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="queryParams.address" placeholder="请输入地址" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactPerson">
        <el-input v-model="queryParams.contactPerson" placeholder="请输入联系人" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="queryParams.contact" placeholder="请输入联系方式" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="培训机构" prop="trainingInstitution">
        <el-input v-model="queryParams.trainingInstitution" placeholder="请输入培训机构" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="点位分类" prop="categoryId">
        <el-select v-model="queryParams.categoryId" placeholder="选择点位分类" clearable style="width: 200px">
          <el-option-group v-for="group in getCategoriesByType()" :key="group.type" :label="group.label">
            <el-option
              v-for="category in group.categories"
              :key="category.id"
              :label="category.name"
              :value="category.id"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleAddSpot">
        <el-icon><Plus /></el-icon>
        新增点位
      </el-button>
      <el-button type="danger" :disabled="selectedSpots.length === 0" @click="handleBatchDelete">
        <el-icon><Delete /></el-icon>
        批量删除 ({{ selectedSpots.length }})
      </el-button>
      <el-button @click="handleImport">
        <el-icon><Upload /></el-icon>
        批量导入
      </el-button>
      <el-button @click="handleExport">
        <el-icon><Download /></el-icon>
        批量导出
      </el-button>
      <div style="margin-left: auto">
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>

    <!-- 点位列表 -->
    <el-table
      :data="filteredSpots"
      border
      style="width: 100%; margin-top: 20px"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="name" label="点位名称" min-width="150" />
      <el-table-column prop="category" label="点位分类" min-width="120">
        <template #default="scope">
          {{ getCategoryName(scope.row.categoryId) }}
        </template>
      </el-table-column>
      <el-table-column prop="content" label="基本内容" min-width="200" show-overflow-tooltip />
      <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip />
      <el-table-column prop="contact" label="联系方式" min-width="150" />
      <el-table-column prop="contactPerson" label="联系人" min-width="120" />
      <el-table-column prop="trainingInstitution" label="培训机构" min-width="150" show-overflow-tooltip />
      <el-table-column prop="trainingType" label="培训工种" min-width="150" show-overflow-tooltip />
      <el-table-column prop="link" label="跳转链接" min-width="200" show-overflow-tooltip />
      <el-table-column prop="talentManager" label="人才管家" min-width="120" />
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="success" @click="handleAssignService(scope.row)">分配服务</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50, 100]"
        :total="totalSpots"
        v-model:page-size="queryParams.pageSize"
        v-model:current-page="queryParams.page"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 新增/编辑点位对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑点位' : '新增点位'"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form ref="spotFormRef" :model="spotForm" :rules="formRules" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="点位名称" prop="name">
              <el-input v-model="spotForm.name" placeholder="请输入点位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="点位分类" prop="categoryId">
              <el-select v-model="spotForm.categoryId" placeholder="请选择点位分类" style="width: 100%" clearable>
                <el-option-group v-for="group in getCategoriesByType()" :key="group.type" :label="group.label">
                  <el-option
                    v-for="category in group.categories"
                    :key="category.id"
                    :label="category.name"
                    :value="category.id"
                  />
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="简介" prop="content">
          <el-input v-model="spotForm.content" type="textarea" :rows="3" placeholder="请输入点位基本内容描述" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="spotForm.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contact">
              <el-input v-model="spotForm.contact" placeholder="请输入联系方式" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-model="spotForm.contactPerson" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训机构" prop="trainingInstitution">
              <el-input v-model="spotForm.trainingInstitution" placeholder="请输入培训机构" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训工种" prop="trainingType">
              <el-input v-model="spotForm.trainingType" placeholder="请输入培训工种" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人才管家" prop="talentManager">
              <el-input v-model="spotForm.talentManager" placeholder="请输入人才管家" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="跳转链接" prop="link">
          <el-input v-model="spotForm.link" placeholder="请输入跳转链接" />
        </el-form-item>

        <el-form-item label="点位位置" prop="location">
          <div class="map-container">
            <div class="map-tip">
              <el-alert title="在地图上点击选择位置" type="info" :closable="false" show-icon />
              <div id="mapContext" ref="mapContext"></div>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmitForm"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分配服务对话框 -->
    <el-dialog v-model="assignServiceDialogVisible" title="分配服务" width="600px" :close-on-click-modal="false">
      <div class="assign-service-container">
        <div class="spot-info">
          <h4>当前点位：{{ currentSpot?.name }}</h4>
          <p class="spot-detail">地址：{{ currentSpot?.address }}</p>
        </div>

        <el-divider content-position="left">选择要分配的服务</el-divider>

        <div class="service-select-container" v-loading="serviceTreeLoading">
          <el-radio-group v-model="selectedServiceId" class="service-radio-group">
            <el-radio
              v-for="service in topLevelServices"
              :key="service.id"
              :label="service.id"
              class="service-radio-item"
            >
              {{ service.name }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="assignServiceDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="assignServiceLoading" @click="handleSubmitAssignService">
            确认分配
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick, h } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Upload, Download, Document, UploadFilled, Delete } from '@element-plus/icons-vue'
import { spotAPI, categoryAPI, menuAPI } from '@/api/index.js'

// 状态
const router = useRouter()
const loading = ref(false)
const dialogVisible = ref(false)
const assignServiceDialogVisible = ref(false) // 分配服务对话框
const isEdit = ref(false)
const totalSpots = ref(0)
const queryRef = ref(null) // 查询表单引用
// 查询参数
const queryParams = reactive({
  name: '',
  address: '',
  contactPerson: '',
  contact: '',
  trainingInstitution: '',
  categoryId: null,
  page: 1,
  pageSize: 10,
})
const spotFormRef = ref(null)
const selectedSpots = ref([])
const categories = ref([]) // 分类列表
const submitLoading = ref(false) // 提交loading状态
const serviceTreeLoading = ref(false) // 服务加载状态
const assignServiceLoading = ref(false) // 分配服务loading状态

// 分配服务相关状态
const currentSpot = ref(null) // 当前要分配服务的点位
const topLevelServices = ref([]) // 顶级服务列表
const selectedServiceId = ref(null) // 选中的服务ID

// 表单数据
const spotForm = reactive({
  id: null,
  name: '',
  categoryId: null, // 改为单选
  content: '',
  address: '',
  contact: '',
  contactPerson: '', // 新增联系人字段
  trainingInstitution: '', // 新增培训机构字段
  trainingType: '', // 新增培训工种字段
  talentManager: '', // 新增人才管家字段
  link: '',
  lat: null,
  lng: null,
  qrcode: '',
})

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入点位名称', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请选择点位分类', trigger: 'change' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  location: [
    {
      validator: (rule, value, callback) => {
        if (!spotForm.lat || !spotForm.lng) {
          callback(new Error('请在地图上选择点位位置'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    },
  ],
}

// 点位数据
const spots = ref([])

// 获取点位列表
const getSpotsList = async () => {
  try {
    loading.value = true
    const params = {
      page: queryParams.page,
      pageSize: queryParams.pageSize,
    }

    // 合并查询参数
    if (queryParams.name) {
      params.name = queryParams.name
    }
    if (queryParams.address) {
      params.address = queryParams.address
    }
    if (queryParams.contactPerson) {
      params.contactPerson = queryParams.contactPerson
    }
    if (queryParams.contact) {
      params.contact = queryParams.contact
    }
    if (queryParams.trainingInstitution) {
      params.trainingInstitution = queryParams.trainingInstitution
    }
    if (queryParams.categoryId) {
      params.categoryId = queryParams.categoryId
    }

    const response = await spotAPI.getList(params)
    if (response.code === 200) {
      spots.value = response.data.list
      totalSpots.value = response.data.total
    }
  } catch (error) {
    ElMessage.error('获取点位列表失败')
    console.error('获取点位列表错误:', error)
  } finally {
    loading.value = false
  }
}

// 获取分类列表
const getCategoriesList = async () => {
  try {
    // 获取所有类型的分类
    const [publicRes, serviceRes] = await Promise.all([categoryAPI.getList('public'), categoryAPI.getList('service')])

    const allCategories = []
    if (publicRes.code === 200) {
      allCategories.push(...publicRes.data)
    }
    if (serviceRes.code === 200) {
      allCategories.push(...serviceRes.data)
    }
    categories.value = allCategories
  } catch (error) {
    console.error('获取分类列表错误:', error)
  }
}

// 根据分类ID获取分类名称（单选）
const getCategoryName = (categoryId) => {
  if (!categoryId) {
    return '-'
  }
  const category = categories.value.find((cat) => cat.id === categoryId)
  return category ? category.name : '-'
}

// 按类型分组分类
const getCategoriesByType = () => {
  const typeMap = {
    public: '公共资源分类',
    service: '服务站点分类',
  }
  const groups = []
  Object.keys(typeMap).forEach((type) => {
    const categoryList = categories.value.filter((cat) => cat.type === type)
    if (categoryList.length > 0) {
      groups.push({
        type,
        label: typeMap[type],
        categories: categoryList,
      })
    }
  })
  return groups
}

// 过滤后的点位列表
const filteredSpots = computed(() => {
  return spots.value
})

// 查询处理
const handleQuery = () => {
  queryParams.page = 1
  getSpotsList()
}

// 重置查询
const resetQuery = () => {
  if (queryRef.value) {
    queryRef.value.resetFields()
  }
  queryParams.name = ''
  queryParams.address = ''
  queryParams.contactPerson = ''
  queryParams.contact = ''
  queryParams.trainingInstitution = ''
  queryParams.categoryId = null
  queryParams.page = 1
  getSpotsList()
}

// 分页处理
const handlePageChange = (page) => {
  queryParams.page = page
  getSpotsList()
}

// 每页条数变化处理
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  queryParams.page = 1
  getSpotsList()
}

// 表格选择变化
const handleSelectionChange = (selection) => {
  selectedSpots.value = selection
}

// 添加点位
const handleAddSpot = () => {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
  nextTick(() => {
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map?.destroy() // 销毁旧地图实例
    map = new TMap.Map(mapContext.value, {
      center: new TMap.LatLng(28.64621, 121.400343), //设置地图中心点坐标
      zoom: 15, //设置地图缩放级别
    })
    //初始化marker图层
    let markerLayer = new TMap.MultiMarker({
      id: 'marker-layer',
      map: map,
    })
    map.on('click', function (e) {
      markerLayer.updateGeometries({
        id: 'marker',
        position: e.latLng,
      })
      spotForm.lat = e.latLng.lat
      spotForm.lng = e.latLng.lng
    })
  })
}

// 编辑点位
const handleEdit = (row) => {
  isEdit.value = true
  Object.assign(spotForm, {
    ...row,
    categoryId: row.categoryId || null,
  })
  dialogVisible.value = true
  nextTick(() => {
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map?.destroy() // 销毁旧地图实例
    map = new TMap.Map(mapContext.value, {
      center: new TMap.LatLng(row.lat || 28.64621, row.lng || 121.400343), //设置地图中心点坐标
      zoom: 15, //设置地图缩放级别
    })
    //初始化marker图层
    let markerLayer = new TMap.MultiMarker({
      id: 'marker-layer',
      map: map,
    })
    if (row.lng && row.lat) {
      //如果传入了经纬度，则创建一个marker
      markerLayer.updateGeometries({
        id: 'marker',
        position: new TMap.LatLng(row.lat, row.lng),
      })
    }
    map.on('click', function (e) {
      markerLayer.updateGeometries({
        id: 'marker',
        position: e.latLng,
      })
      spotForm.lat = e.latLng.lat
      spotForm.lng = e.latLng.lng
    })
  })
}

// 删除点位
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定删除点位 "${row.name}" 吗？`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        const response = await spotAPI.deleteByIds([row.id])
        if (response.code === 200) {
          ElMessage.success('点位删除成功')
          getSpotsList() // 重新获取列表
        } else {
          ElMessage.error(response.message || '删除失败')
        }
      } catch (error) {
        ElMessage.error('删除失败')
        console.error('删除点位错误:', error)
      }
    })
    .catch(() => {})
}

// 批量删除点位
const handleBatchDelete = () => {
  if (selectedSpots.value.length === 0) {
    ElMessage.warning('请先选择要删除的点位')
    return
  }

  const spotNames = selectedSpots.value.map((spot) => spot.name).join('、')
  ElMessageBox.confirm(`确定删除以下 ${selectedSpots.value.length} 个点位吗？\n${spotNames}`, '批量删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    customClass: 'batch-delete-dialog',
  })
    .then(async () => {
      try {
        const spotIds = selectedSpots.value.map((spot) => spot.id)
        const response = await spotAPI.deleteByIds(spotIds)
        if (response.code === 200) {
          ElMessage.success(`成功删除 ${selectedSpots.value.length} 个点位`)
          selectedSpots.value = [] // 清空选择
          getSpotsList() // 重新获取列表
        } else {
          ElMessage.error(response.message || '批量删除失败')
        }
      } catch (error) {
        ElMessage.error('批量删除失败')
        console.error('批量删除点位错误:', error)
      }
    })
    .catch(() => {})
}

// 批量导入
const handleImport = () => {
  // 跳转到导入页面
  router.push('/home/import')
}

// 批量导出
const handleExport = async () => {
  if (selectedSpots.value.length === 0) {
    ElMessage.warning('请先选择要导出的点位')
    return
  }

  try {
    // 获取选中的点位ID
    const spotIds = selectedSpots.value.map((spot) => spot.id)
    const params = {
      ids: spotIds.join(','),
    }

    const response = await spotAPI.export(params)

    if (response.ok) {
      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `点位数据_${new Date().toLocaleDateString()}.xlsx`
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)
      ElMessage.success(`已成功导出 ${selectedSpots.value.length} 条点位数据`)
    } else {
      ElMessage.error('导出失败')
    }
  } catch (error) {
    ElMessage.error('导出失败')
    console.error('批量导出错误:', error)
  }
}
// 初始化地图
const mapContext = ref(null)
var map = null
// 提交表单
const handleSubmitForm = () => {
  if (!spotFormRef.value) return

  spotFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        submitLoading.value = true
        // 准备提交数据
        const submitData = {
          name: spotForm.name,
          categoryId: spotForm.categoryId, // 改为单个分类ID
          content: spotForm.content,
          address: spotForm.address,
          contact: spotForm.contact,
          contactPerson: spotForm.contactPerson, // 新增联系人字段
          trainingInstitution: spotForm.trainingInstitution, // 新增培训机构字段
          trainingType: spotForm.trainingType, // 新增培训工种字段
          talentManager: spotForm.talentManager, // 新增人才管家字段
          link: spotForm.link,
          lng: spotForm.lng,
          lat: spotForm.lat,
        }

        // 如果有二维码，添加到数据中
        if (spotForm.qrcode) {
          submitData.qrcode = spotForm.qrcode
        }

        let response
        if (isEdit.value) {
          // 编辑现有点位
          response = await spotAPI.update(spotForm.id, submitData)
        } else {
          // 新增点位
          response = await spotAPI.create(submitData)
        }

        if (response.code === 200) {
          ElMessage.success(isEdit.value ? '点位更新成功' : '点位添加成功')
          dialogVisible.value = false
          getSpotsList() // 重新获取列表
        } else {
          ElMessage.error(response.message || '操作失败')
        }
      } catch (error) {
        ElMessage.error('操作失败')
        console.error('提交表单错误:', error)
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  spotForm.id = null
  spotForm.name = ''
  spotForm.categoryId = null
  spotForm.content = ''
  spotForm.address = ''
  spotForm.contact = ''
  spotForm.contactPerson = '' // 重置联系人字段
  spotForm.trainingInstitution = '' // 重置培训机构字段
  spotForm.trainingType = '' // 重置培训工种字段
  spotForm.talentManager = '' // 重置人才管家字段
  spotForm.link = ''
  spotForm.lat = null
  spotForm.lng = null
  spotForm.qrcode = ''
}

// 分配服务相关方法
const handleAssignService = async (row) => {
  currentSpot.value = row
  assignServiceDialogVisible.value = true
  // 获取顶级服务数据
  await getTopLevelServices()
  // 设置当前已分配的服务
  selectedServiceId.value = row?.serviceIdList[0] || null
}

// 获取顶级服务数据
const getTopLevelServices = async () => {
  try {
    serviceTreeLoading.value = true
    const response = await menuAPI.getTree()
    if (response && response.code === 200) {
      // 只获取顶级菜单
      topLevelServices.value = response.data || []
    } else {
      ElMessage.error('获取服务数据失败')
    }
  } catch (error) {
    console.error('获取服务数据错误:', error)
    ElMessage.error('获取服务数据失败')
  } finally {
    serviceTreeLoading.value = false
  }
}

// 提交分配服务
const handleSubmitAssignService = async () => {
  if (!selectedServiceId.value) {
    ElMessage.warning('请选择一个服务')
    return
  }

  try {
    assignServiceLoading.value = true
    // 为本地数据保存
    spots.value = spots.value.map((spot) => {
      if (spot.id === currentSpot.value.id) {
        return {
          ...spot,
          serviceId: selectedServiceId.value, // 更新服务ID
        }
      }
      return spot
    })
    const response = await spotAPI.assignServices(currentSpot.value.id, [selectedServiceId.value])
    if (response && response.code === 200) {
      ElMessage.success('服务分配成功')
      assignServiceDialogVisible.value = false
      resetAssignServiceForm()
    } else {
      ElMessage.error(response?.message || '服务分配失败')
    }
  } catch (error) {
    console.error('分配服务错误:', error)
    ElMessage.error('服务分配失败')
  } finally {
    assignServiceLoading.value = false
  }
}

// 重置分配服务表单
const resetAssignServiceForm = () => {
  currentSpot.value = null
  topLevelServices.value = []
  selectedServiceId.value = null
}

onMounted(() => {
  // 获取点位数据和分类数据
  getSpotsList()
  getCategoriesList()
})
</script>

<style scoped>
.spot-manager-container {
  padding: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}

.page-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
}

.operation-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

/* 搜索表单样式 */
.el-form--inline .el-form-item {
  margin-right: 16px;
  margin-bottom: 16px;
}

.el-form--inline .el-form-item:last-child {
  margin-right: 0;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.search-input {
  width: 300px;
}

.category-filter {
  width: 200px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.map-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mapContext {
  width: 100%;
  height: 300px;
  position: relative;
}
.mock-map {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
  background-color: #eee;
  cursor: pointer;
}

.location-info {
  margin-top: 10px;
  padding: 8px;
  background-color: #f0f9eb;
  color: #67c23a;
  border-radius: 4px;
  font-size: 14px;
}

.qrcode-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.qrcode-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.upload-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.upload-text {
  color: #8c939d;
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
}

.qrcode-preview {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.qrcode-actions {
  margin-top: 10px;
  text-align: center;
}

/* 分配服务对话框样式 */
.assign-service-container {
  max-height: 600px;
  overflow-y: auto;
}

.spot-info {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.spot-info h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.spot-detail {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.service-select-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px;
}

.service-radio-group {
  width: 100%;
  display: flex;
  gap: 12px;
}

.service-radio-item {
  margin-right: 0;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.service-radio-item:hover {
  background-color: #f5f7fa;
}

.service-radio-item.is-checked {
  background-color: #ecf5ff;
  border-color: #409eff;
}

/* 批量删除对话框样式 */
:deep(.batch-delete-dialog) .el-message-box__message {
  max-height: 200px;
  overflow-y: auto;
  word-break: break-all;
}
</style>
